<template>
  <div class="login">
    <Title></Title>
    <div class="login_box">
      <div class="inner">

        <div class="login_role" v-if="mch_type">
          <!-- <el-select v-model="vaule" placeholder="请选择" @change="Change">
            <el-option v-for="items in options" :key="items.name" :label="items.name" :value="items.openid">
            </el-option>
          </el-select> -->
          <img :src="[wxcahtcode]" alt="">
          微信小程序扫码登录
        </div>
        <div class="login_from" v-else>
          <div class="login_tab">
            <div class="tab_item" :class="[loginid ==index ? 'tab_active' : '']" v-for="(item,index) in logotab" @click="logotabfn(index)">
              {{item}}
            </div>
          </div>
          <div class="logi_list" v-if="loginid==0">
            <div class="from_item">
              <div class="username">
                用户名
              </div>
              <div class="login_input">
                <input type="text" placeholder="4到16位（字母，数字，下划线，减号）" v-model="ruleForm.username" @blur="nameiput">
              </div>
            </div>
            <div class="from_item">
              <div class="username">
                密码
              </div>
              <div class="login_input">
                <input type="password" v-model="ruleForm.password" @blur="passinput">
              </div>
            </div>
            <div class="logon_btn" @click="loginfn">
               登录
            </div>
          </div>
          <div class="logi_list" v-else>
            <div class="from_item">
              <div class="username">
                用户名
              </div>
              <div class="login_input">
                <input type="text" placeholder="4到16位（字母，数字，下划线，减号）" v-model="Form.username" @blur="nameiput1">
              </div>
            </div>
            <div class="from_item">
              <div class="username">
                密码
              </div>
              <div class="login_input">
                <input type="password" v-model="Form.password" @blur="passinput1">
              </div>
            </div>
            <div class="from_item">
              <div class="username">
                确认密码
              </div>
              <div class="login_input">
                <input type="password" v-model="Form.password2" @blur="passinput2">
              </div>
            </div>
            <div class="logon_btn" @click="registerfn">
               注册
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    roleapi,
    loginapi,
    copyapi,
    registerapi,
    loginpcapi
  } from "../../api/http.js"
  import Title from "../../components/title.vue"
  export default {
    name: 'login',
    components: {
      Title
    },
    data() {
      return {
        logotab:[
         "登录",
         "注册"
        ],
        loginid:0,
        options: [],
        vaule: "",
        wxcahtcode: "",
        time: null,
        ruleForm: {
          username: '',
          password: ''
        },
        Form: {
          username: '',
          password: '',
          password2:''
        },
        mch_type:false
      }
    },
    async created() {
      if(localStorage.getItem('user')!=null) {
        await this.$router.push({path: "/home"})
        return false
      }
     var mch_type= JSON.parse(sessionStorage.getItem("total")).mch_info.mch_type
     console.log(mch_type);
     if(mch_type==1){
       this.mch_type = true
       const res = await loginapi()
       if (res.data.code==200) {
          this.wxcahtcode=res.data.data.qrcode
          this.time=setInterval(()=>{
            this.getcode({
              token:res.data.data.token
            })
          },1000)
       }else{

       }
     }

    },
    beforeDestroy(){
      this.clearInterval()
    },
    methods: {
      clearInterval(){
        const {time} = this
        window.clearInterval(time)
        this.time = null
      },
      logotabfn(index){
        console.log(index);
        this.loginid = index
      },
      nameiput(){
        var namereg = /^[a-zA-Z0-9_-]{4,16}$/;
        if (this.ruleForm.username.length>0) {
          console.log(23);

        }
      },
      passinput(){
        var addressreg = /^[^ ]/
        if (this.ruleForm.password.length>0) {
          // addressreg.test(this.ruleForm.password) ? this.$message("输入正确") : this.$message("输入正确的密码")
        }
      },
      nameiput1(){
        var namereg = /^[a-zA-Z0-9_-]{4,16}$/;
        if (this.Form.username.length>0) {
          // namereg.test(this.Form.username) ? this.$message("用户名输入正确") : this.$message("输入正确的4到16位（字母，数字，下划线，减号）")
        }
      },
      passinput1(){
        var addressreg = /^[^ ]/
        if (this.Form.password.length>0) {
          // addressreg.test(this.Form.password) ? this.$message("输入正确") : this.$message("输入正确的密码")
        }
      },
      passinput2(){
        var addressreg = /^[^ ]/
        if (this.Form.password2.length>0) {
          // addressreg.test(this.Form.password2)&&this.Form.password==this.Form.password2? this.$message("输入正确") : this.$message("两次输入密码不一致或者密码输入格式错误")
        }
      },
      Change() {
      },
      async getcode({
        token
      }) {
        const res = await copyapi({
          token
        })
        if (res.data.code == 200) {
          // clearInterval(this.time)
          this.clearInterval()
          localStorage.setItem('user', res.data.data.openid)
          this.$router.go(-1);
        } else {

        }

        console.log(res.data);
      },
     async loginfn() {
        var namereg = /^[a-zA-Z0-9_-]{4,16}$/;
        var addressreg = /^[^ ]/
        if (this.ruleForm.username == "" || !namereg.test(this.ruleForm.username)) {
          return this.$message("输入正确的4到16位（字母，数字，下划线，减号）")
        }
        if (this.ruleForm.password == ""|| !addressreg.test(this.ruleForm.password)){
          return this.$message("输入正确的密码")
        }
        const res = await loginpcapi(this.ruleForm)
        console.log(res);
        if (res.data.code==200) {
          localStorage.setItem('user', res.data.data.openid)
          this.$router.go(-1);
        } else{

        }
      },
     async registerfn(){
        var namereg = /^[a-zA-Z0-9_-]{4,16}$/;
        var addressreg = /^[^ ]/
        if (this.Form.username == "" || !namereg.test(this.Form.username)) {
          return this.$message("输入正确的4到16位（字母，数字，下划线，减号）")
        }
        if (this.Form.password == ""||this.Form.password2 == "" || !addressreg.test(this.Form.password2)||!addressreg.test(this.Form.password)||this.Form.password2!=this.Form.password) {
          return this.$message("输入正确的密码")
        }

        const res = await registerapi(this.Form)
        console.log(res.data);
        if (res.data.code==200) {
          this.logotabfn(0)
          this.$message(res.data.msg)
          this.Form={
            username:"",
            password:"",
            password2:""
          }
        } else{
          this.$message(res.data.msg)
        }

      }
    }
  }
</script>

<style lang="less">
  .login {
    width: 100%;
  }

  .login_box {
    width: 100%;

    .inner {
      width: 1300px;
      margin: 0 auto;
      padding: 10px 85px;
      box-sizing: border-box;

      .login_from {

        width: 400px;
        height: 350px;
        margin: 20px auto;
        padding: 20px;
        box-sizing: border-box;
        border: 1px solid #9A9A9A;
        border-radius: 10px;

        .login_tab {
          font-size: 16px;
          color: #000;
          margin-bottom: 20px;
          display: flex;
          justify-content: center;
          align-items: center;

          .tab_active:after {
            content: "";
            display: block;
            width: 100px;
            height: 1px;
            background-color: red;
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: -50px;
          }

          .tab_item {
            position: relative;
            width: 50%;
            height: 40px;
            text-align: center;
          }
        }
        .logi_list{
          width: 100%;
          padding: 20px 0;
          box-sizing: border-box;
          .logon_btn{
            width: 100px;
            height: 40px;
            border-radius: 5px;
            background-color: rgb(255, 68, 68);
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px auto;
          }
          .from_item {
            width: 100%;
            height: 40px;
            margin-bottom: 20px;
            color: #9A9A9A;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .username {
              width: 100px;
              font-size: 14px;
              text-align: center;
            }
            .login_input {
              width: 260px;
              border: 1px solid #9A9A9A;
              border-radius: 5px;
              input {
                width: 100%;
                height: 40px;
                outline: none;
                border: none;
                background-color: transparent;
              }
            }
          }
        }

      }

      .login_role {
        width: 100%;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-size: 14px;
        color: #9A9A9A;

        img {
          width: 200px;
          height: 200px;
          margin-bottom: 20px;
        }
      }

      .login_btn {
        width: 80px;
        height: 36px;
        font-size: 14px;
        background-color: rgb(255, 68, 68);
        color: rgb(255, 255, 255);
        border-radius: 10px;
        line-height: 36px;
        text-align: center;
        margin: 0 auto;
      }
    }
  }
</style>
